<!DOCTYPE html>
<html lang="en">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    Fira Code | 为写程序而生的字体 |
    
    ZhiYinQ</title>
  
    <link rel="shortcut icon" href="/favicon.icon">
  
  <link rel="stylesheet" href="/css/style.css">
  
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
  
  <script src="/js/pace.min.js"></script>
</head>
</html>
<link href="https://cdn.staticfile.org/animate.css/3.7.2/animate.min.css" rel="stylesheet">

<body>
<main class="content">
  <section class="outer">
  <style>
.pag a:link, .pag a:visited {
    opacity: 1;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -o-transition: all .15s linear;
    -ms-transition: all .15s linear;
    transition: all .15s linear;
    color: #424242;
}
.pag a:hover {
    color: #ffffff;
}
.pag :hover {
    background-color: #127ea9;
}
</style>

<article id="post-FiraCode为写程序而生的字体" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Fira Code | 为写程序而生的字体
    </h1>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/12/FiraCode为写程序而生的字体/" class="article-date">
  <time datetime="2019-08-12T12:56:43.000Z" itemprop="datePublished">2019-08-12</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/ifs/">ifs</a>
  </div>

		&emsp;<i class="fe fe-bar-chart"></i> <span class="post-count">585</span>字
		&emsp;<i class="fe fe-clock"></i> <span class="post-count">2</span>分钟
      </div>
    
    
      
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      
      
      
        <p>程序员福利！！！今天为大家带来一个专为程序员写程序设计的字体 —— Fira Code Fira 是 Mozilla 公司（火狐浏览器她爹）主推的字体系列。Fira Code 是其中的一员，专为写程序而生。出来具有等宽等基本属性外，还加入了编程连字特性（ligatures）。</p>
<a id="more"></a>
<hr>
<p><img src="https://camo.githubusercontent.com/3a8948f34284f378ead7af5846aa432035c687ad/687474703a2f2f732e746f6e736b792e6d652f696d67732f666972615f636f64655f6c6f676f2e737667" alt><br><strong>程序员福利！！！</strong> 今天为大家带来一个专为程序员写程序设计的字体 —— Fira Code Fira 是 Mozilla 公司（火狐浏览器她爹）主推的字体系列。Fira Code 是其中的一员，专为写程序而生。出来具有等宽等基本属性外，还加入了编程连字特性（ligatures）。<br><br><br><code>Fira Code</code> 就是利用这个特性对编程中的常用符号进行优化，比如把输入的「!=」直接显示成「≠」或者把「&gt;=」变成「≥ 」等等，以此来提高代码的可读性。<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/all_ligatures.png" alt></p>
<h1 id="代码示例"><a href="#代码示例" class="headerlink" title="#代码示例"></a>#代码示例</h1><p>Ruby:<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/ruby.png" alt><br>JavaScript:<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/javascript.png" alt><br>Erlang:<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/erlang.png" alt><br>Elixir:<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/elixir.png" alt><br>Go:<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/go.png" alt><br>LiveScript:<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/livescript.png" alt><br>Clojure:<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/clojure.png" alt><br>Swift:<br><img src="https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/swift.png" alt></p>
<h1 id="正文"><a href="#正文" class="headerlink" title="#正文"></a>#正文</h1><blockquote>
<p>安装 Fira Code</p>
</blockquote>
<p>使用 .ttf 文件安装<br>访问此网站 <a href="https://github.com/tonsky/FiraCode" target="_blank" rel="noopener">https://github.com/tonsky/FiraCode</a> 找到 Download 这个链接，单击它。<br><img src="https://mogeko.github.io/blog-images/r/006/install_fira-code_1.png" alt><br>单击这个地址可以下载 v1.204 版的 Fira Code -&gt; <a href="https://github.com/tonsky/FiraCode/releases/download/1.204/FiraCode_1.204.zip" title="Download v1.204" target="_blank" rel="noopener">Download v1.204</a></p>
<p>下载好后，解压它。 打开解压后得到的文件夹。 打开 /ttf文件夹。 会看到以下文件<br><img src="https://mogeko.github.io/blog-images/r/006/install_fira-code_2.png" alt><br>Ctrl+A 全选 -&gt; 右键 -&gt; 安装。</p>
<p><strong>使用 Chocolate 安装</strong><br>关于 Chocolate，请参考<a href="https://mogeko.me/2017/006/#%E4%BD%BF%E7%94%A8-Chocolatey-%E5%AE%89%E8%A3%85" title="这篇文章" target="_blank" rel="noopener">这篇文章</a>。 使用以下命令安装<br>    $ choco install firacode</p>
<blockquote>
<p><strong>如何使用</strong></p>
</blockquote>
<p>只有以下编辑器、浏览器可以完美支持 Fira Code：</p>
<p><a href="https://mogeko.me/2017/006/#%E6%94%AF%E6%8C%81%E7%9A%84%E7%BC%96%E8%BE%91%E5%99%A8" title="支持的编辑器" target="_blank" rel="noopener">支持的编辑器</a></p>
<p><a href="https://mogeko.me/2017/006/#%E6%94%AF%E6%8C%81%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8" title="支持的浏览器" target="_blank" rel="noopener">https://mogeko.me/2017/006/#%E6%94%AF%E6%8C%81%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8</a></p>
<p><strong>VS Code</strong></p>
<p>介绍一下在 VS Code 中如何配置（因为VS Code 是我主要使用的编辑器，别的不是很熟悉） 打开 VS Code。 文件 -&gt; 首选项 -&gt; 设置<br><img src="https://mogeko.github.io/blog-images/r/006/use_fira-code_1.png" alt><br>然后在右边的窗口中添加</p>
<pre><code>&quot;editor.fontFamily&quot;: &quot;Fira Code&quot;,
&quot;editor.fontLigatures&quot;: true</code></pre><p><img src="https://mogeko.github.io/blog-images/r/006/use_fira-code_2.png" alt><br>Ctrl+S 保存。如果没有生效就使用以下代码</p>
<pre><code>&quot;editor.fontFamily&quot;: &quot;&apos;Fira Code&apos;&quot;,
&quot;editor.fontLigatures&quot;: true</code></pre><p>Ctrl+S 保存。</p>
<p>别的编辑器可以参考 -&gt; <a href="https://github.com/tonsky/FiraCode/wiki#how-to-enable-ligatures" target="_blank" rel="noopener">https://github.com/tonsky/FiraCode/wiki#how-to-enable-ligatures</a></p>
<p><strong>Chrome</strong></p>
<p>可以将 Fira Code 设为 Chrome 的 等宽字体。</p>
<p>打开 Chrome。点击右上角的 ┇ -&gt; 设置<br><img src="https://mogeko.github.io/blog-images/r/006/use_fira-code_3.png" alt></p>
<p>选择 自定义字体</p>
<p><img src="https://mogeko.github.io/blog-images/r/006/use_fira-code_4.png" alt></p>
<p>宽度固定的字体 -&gt; 在下拉菜单中选择 Fira Code<br><img src="https://mogeko.github.io/blog-images/r/006/use_fira-code_5.png" alt></p>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="https://github3982.github.io/2019/08/12/FiraCode为写程序而生的字体/" data-id="ck1vxnbp10005iwq0bmvv35ji"
         class="article-share-link">分享</a>“”“分享按钮”“”-->
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Node/">Node</a></li></ul>

	  
	<div style="text-align:center;color: #ccc;font-size:14px;">------------- 本文结束&nbsp;<i class="fe fe-smile"></i>&nbsp;感谢您的阅读 -------------</div>

    </footer>

  </div>

  
    
  <nav class="article-nav">
    
      <a href="/2019/08/15/md/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            Markdown 基本语法在 Ocean 中的展现形式
          
        </div>
      </a>
    
    
      <a href="/2019/08/10/node - 副本 (9)/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">Node安装与使用</div>
      </a>
    
  </nav>


  

  
    

  

</article>



</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <!--<li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>-->
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2019 ZhiYinQ</li>
      <li>Powered by <a style="text-decoration: none !important;">Hexo</a></li>
      <li>Theme  <a style="text-decoration: none !important;">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>

<aside class="sidebar sidebar-specter">
  
    <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img id="img" src="/images/hexo.svg" alt="ZhiYinQ"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">主页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/dynamic">动态</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/share">分享</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/playlist">播放</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
  </aside>
  <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.justifiedGallery.min.js"></script>
<script src="/js/lazyload.min.js"></script>
<script src="/js/busuanzi-2.3.pure.min.js"></script>

  <script src="/fancybox/jquery.fancybox.min.js"></script>



  <script src="/js/tocbot.min.js"></script>
  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>



<script>
// 使用fancybox来显示post图片集(#andus-head-img为头像id)
$('img:not(#img)').each(function() {
  $(this).wrap('<a class="fancybox" data-fancybox="gallery" href="' + $(this).prop("src") + '"></a>'); 
})
</script>


<script src="/js/ocean.js"></script>

</body>
</html>
<script type="text/javascript" src="../dist/music.js"></script>
<script src="js/scrollReveal.js"></script>
</script>

	  <script>
			  $(function(){
    $('div img li').addClass('wdata-scroll-reveal');
});
</script>
<script>
window.scrollReveal = new scrollReveal();
//或者，elem 为动画元素的任何级别的父元素
window.scrollReveal2 = new scrollReveal({elem: document.getElementById('srcontainer')});
</script>	
